@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-dark text-light font-sans;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }
  
  h1 {
    @apply text-3xl md:text-4xl;
  }
  
  h2 {
    @apply text-2xl md:text-3xl;
  }
  
  h3 {
    @apply text-xl md:text-2xl;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-all duration-200;
  }
  
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-dark;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary-dark;
  }
  
  .btn-outline {
    @apply border border-primary text-primary hover:bg-primary hover:text-white;
  }
  
  .card {
    @apply bg-dark-light rounded-lg p-6 shadow-lg;
  }
  
  .card-hover {
    @apply hover:shadow-glow transition-shadow duration-300;
  }
  
  .input {
    @apply bg-dark-darker text-light border border-dark-light rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary;
  }
  
  .badge {
    @apply px-2 py-1 text-xs rounded-full font-medium;
  }
  
  .badge-blue {
    @apply bg-accent-blue/20 text-accent-blue;
  }
  
  .badge-purple {
    @apply bg-accent-purple/20 text-accent-purple;
  }
  
  .badge-pink {
    @apply bg-accent-pink/20 text-accent-pink;
  }
  
  .badge-orange {
    @apply bg-accent-orange/20 text-accent-orange;
  }
  
  .badge-yellow {
    @apply bg-accent-yellow/20 text-accent-yellow;
  }
  
  .tech-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
  
  .tech-card {
    @apply card card-hover border border-dark-light hover:border-primary;
  }
  
  .nav-link {
    @apply text-light-dark hover:text-primary transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply text-primary font-medium;
  }
  
  .dashboard-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
  }
  
  .stat-card {
    @apply card flex flex-col;
  }
  
  .stat-value {
    @apply text-3xl font-bold text-primary mt-2;
  }
  
  .stat-label {
    @apply text-sm text-light-dark;
  }
  
  .chart-container {
    @apply card p-4 h-80;
  }
}

/* 科技感动画效果 */
.tech-line {
  position: relative;
  overflow: hidden;
}

.tech-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3B82F6, transparent);
  animation: tech-line-animation 3s infinite;
}

@keyframes tech-line-animation {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.glow-text {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}

.cyber-border {
  position: relative;
  border: 1px solid #334155;
  border-radius: 0.5rem;
}

.cyber-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3B82F6, #10B981, #3B82F6);
  border-radius: 0.6rem;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cyber-border:hover::before {
  opacity: 1;
}

.matrix-bg {
  background-color: #0F172A;
  background-image: 
    radial-gradient(#3B82F6 1px, transparent 1px),
    radial-gradient(#10B981 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}
